<form class = "ajax-form" action = "{:url('')}" method="post">
    <div class = "form-group row">
        <label class = "col-sm-2 col-xs-12">数据表</label>
        <div class = "col-sm-10 col-xs-12">
            <select name = "table_name" class = "form-control" onchange="on_change_table(this)">
                <option value = "">请选择数据表</option>
                {volist name="tables" id="vo"}
                <option value = "{$vo.table_name}">{$vo.table_name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class = "form-group row">
        <label class = "col-sm-2 col-xs-12">模块名称</label>
        <div class = "col-sm-10 col-xs-12">
            <input type="text" class = "form-control" name = "package" autocomplete="off"/>
        </div>
    </div>
    <div class = "form-group row">
        <label class = "col-sm-2 col-xs-12">控制器名</label>
        <div class = "col-sm-10 col-xs-12">
            <input type="text" class = "form-control" name="controller_name" autocomplete="off"/>
        </div>
    </div>
    <div class = "form-group row">
        <table class = "table">
            <thead>
                <tr>
                    <td>字段名称</td>
                    <td>中文名称</td>
                    <td>显示字段</td>
                    <td>查询字段</td>
                    <td>表单字段</td>
                    <td>填充值</td><!--暂时只支持input与select,textarea,date,后续添加图片上传等-->
                    <td>填充值扩展</td>
                    <!--生成校验器规则，后续开发
                    <td>必填</td>
                    <td>邮件</td>
                    <td>数字</td>
                    <td>日期</td>
                    <td>长度</td>
                    -->
                </tr>

            </thead>
            <tbody id = "fields">

            </tbody>
        </table>
        <small>若填充值为选择器，请在请充值扩展中为填充值取定选择内容，若选自字典格式：（DC:字典值）；若选自数据库，格式为：（DB：表名称:键值字段：值字段）</small>
    </div>
    <div class = "form-group user-btn-group">
        <button class="btn btn-success" type='submit'>保存</button>
        <button class="btn btn-warning" type='button' data-confirm="确定要取消数据保存吗？" data-dismiss="modal">取消</button>
    </div>
    <script>
        function on_change_table(e) {
            let table_name = $(e).val()
            $.ajax({
                url: '{:url("get_fields")}',
                data: {
                    "table_name": table_name
                },
                success: function (res) {
                    if(res.code == 0) {
                        let fields = res.data.fields
                        let fields_html = ''
                        for(let i = 0;i < fields.length;i++) {
                            if(fields[i].COLUMN_NAME === 'id'){
                                continue
                            }
                            fields_html += `
                            <tr>
                                <td>${fields[i].COLUMN_NAME} <input type="hidden" name = "fields[${i}][column]" value = "${fields[i].COLUMN_NAME}"/></td>
                                <td><input type="text" name = "fields[${i}][name]" class = "form-control"/></td>
                                <td><select name="fields[${i}][isshow]" class = "form-control"><option value = "1">显示</option><option value = "2">不显示</option></select></td>
                                <td><select name="fields[${i}][issearch]" class = "form-control"><option value = "1">是</option><option value = "2">否</option></select></td>
                                <td><select name="fields[${i}][isform]" class = "form-control"><option value = "1">是</option><option value = "2">否</option></select></td>
                                <td><select name="fields[${i}][value]" class = "form-control" >
                                    <option value = "1">输入框</option>
                                    <option value = "2">选择框</option>
                                    <option value = "3">文本框</option>
                                    <option value = "4">日期</option>
                                    </select>
                                 </td>
                                 <td>
                                    <input type="text" name="fields[${i}][attach]" class = "form-control"/>
                                  </td>
                            </tr>
                            `
                        }
                        $("#fields").html(fields_html)
                    }
                },
                fail: function(err) {
                    alert("请求字段名称出错");
                }
            })
        }

    </script>
</form>